<template>
  <div id='updateFail'>
    <div class="card-container">
      <el-table v-loading="loading" :data="dataLsit" :row-class-name="tableRowClassName">
        <el-table-column label="推送时间" width="150" show-overflow-tooltip align="center" prop="upgradeTime" />
        <el-table-column label="设备序列号" width="150" show-overflow-tooltip align="center" prop="deviceCode" />
        <el-table-column label="站点名称" show-overflow-tooltip align="center" prop="siteName" />
        <el-table-column label="设备类型" show-overflow-tooltip align="center" prop="deviceTypeLabel" />
        <el-table-column label="设备型号" width="80" show-overflow-tooltip align="center" prop="model" />
        <!-- <el-table-column label="软件版本" show-overflow-tooltip align="center" prop="version" /> -->
        <el-table-column label="所属项目" show-overflow-tooltip align="center" prop="projectName" />
        <el-table-column label="推送结果" show-overflow-tooltip align="center" prop="upgradeStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.upgradeStatus == '1'" style="color: #67C23A;">成功</span>
            <span v-else-if="scope.row.upgradeStatus == '0'" style="color: #F56C6C;">失败</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="onlineStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_on_line_status" :value="scope.row.onlineStatus" />
          </template>
        </el-table-column>
        <el-table-column label="下载状态" align="center" prop="message">
        </el-table-column>
        <el-table-column label="重试次数" align="center" prop="pushCount">
        </el-table-column>
        <el-table-column label="监控开关" align="center" prop="monitorStatus ">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.monitorStatus"
              v-show="scope.row.message ? ((scope.row.message.indexOf('%') != -1 || scope.row.message == '下载失败') && scope.row.onlineStatus == '1') : false"
              active-value="1" inactive-value="0" :disabled="switchLoad" @change="changeSth(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

  </div>
</template>

<script>
import { pushLogCheck, cancelMonitor } from '@/api/version/version';

export default {
  name: 'updateFail',
  dicts: ['sys_on_line_status'],
  props: {
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      switchLoad: false,
      loading: true,
      dataLsit: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      timer: null
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getList();
    this.handleTimer()
  },
  beforeCreate() { },
  beforeMount() { },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.message) {
        if (row.monitorStatus == 1 && row.message.indexOf('%') != -1) {
          return 'warning-row';
        }
      }
      return '';
    },
    changeSth(row, val) {
      this.switchLoad = true;
      let text = "";
      if (row.isSendMessage == "1") {
        text = "是否启用？";
      } else {
        text = "是否关闭？";
      }
      this.$modal
        .confirm(text)
        .then(async () => {
          cancelMonitor({ versionPushId: row.versionPushId, monitorStatus: row.monitorStatus }).then((response) => {
            this.switchLoad = false;
            this.getList();
          });

        })
        .catch(() => {
          this.switchLoad = false;
          this.getList();
        });

    },
    async getList() {
      console.log(this.row, 'this.row')
      this.queryParams.versionPushTotalId = this.row.versionPushTotalId
      this.queryParams.upgradeStatus = this.row.upgradeStatus
      const res = await pushLogCheck(this.queryParams);
      if (res.code == 200) {
        let result = false
        if (res.rows.length > 0) {
          result = res.rows.every(function (item) {
            return item.message == '下载成功'
          });
        }
        this.dataLsit = res.rows;
        this.total = res.total;
        this.loading = false;
        console.log(result, 'result')
        if (result) {
          clearTimeout(this.timer);
        }
      }
    },

    handleTimer() {
      this.timer = setInterval(() => {
        this.getList()
      }, 5000)
    }
  },
};
</script>
<style lang='scss' scoped>
#updateFail {
  width: 100%;
  height: 100%;
}

::v-deep .el-table .warning-row {
  background: rgb(64, 158, 255, .3);
  // color: #ddd;
}
</style>